import React from 'react';
import { View, StyleSheet, Dimensions, Platform } from 'react-native';
import { JDImage, JDDevice, JDVideoPlayer, JDScrollView, JDJumping, JDTouchable } from '@areslabs/jdreact-core-lib'
import { Tracker, Util } from '@marslibs/yfereact-freetemplate-common';

const { width } = Dimensions.get('window');

export default class Banner extends React.Component {
  state = {
    currentPage: 0,
    playOneShow: true,
    playTwoShow: false
  }

  componentDidMount() {
    this._startTimer();
  }

  componentWillUnMount() {
    clearInterval(this.interval);
  }

  _startTimer() {
    const JDScrollView = this.refs.JDScrollView;
    const imgCount = 3;

    this.interval = setInterval(() => {
      let activePage = 0;
      if ((this.state.currentPage + 1) >= imgCount) { //防止越界
        activePage = 0;
      } else {
        activePage = this.state.currentPage + 1;
      }
      this.setState({ currentPage: activePage });

      const offSetX = activePage * BANNER_WIDTH;
      JDScrollView.scrollTo({x: offSetX, y: 0, animated: true});
    }, 1000);
  }

  handlePress = (url) => {
    Tracker.click();
    JDJumping.jumpToOpenapp(url);
  }

  render() {
    const { floorData } = this.props;
    let bannerData = [];
    let videoData;
    let image1Data;
    let image2Data;
    let image3Data;
    if (Platform.OS == 'web') {
      bannerData = [
        floorData.imageUrl1.value,
        floorData.imageUrl2.value,
        floorData.imageUrl3.value
      ];
      videoData = floorData.video.value;
      image1Data = floorData.imageUrl4.value;
      image2Data = floorData.imageUrl5.value;
      image3Data = floorData.imageUrl6.value;
    } else {
      bannerData = [
        Util.getNodeText(floorData,'imageUrl1'),
        Util.getNodeText(floorData,'imageUrl2'),
        Util.getNodeText(floorData,'imageUrl3')
      ];
      videoData = Util.getNodeText(floorData,'video');
      image1Data = Util.getNodeText(floorData,'imageUrl4');
      image2Data = Util.getNodeText(floorData,'imageUrl5');
      image3Data = Util.getNodeText(floorData,'imageUrl6');
    }
    return (
      <View>
        { this.state.playOneShow && <JDVideoPlayer
          style={styles.videoContainer}
          source={{
            url: videoData.videoUrl,
            autoPlay: true
          }}
          onCompletion={() => {
            this.setState({
              playOneShow: false,
              playTwoShow: true
            })
          }}
        /> }
        { this.state.playTwoShow && <JDVideoPlayer
          style={styles.videoContainer}
          source={{
            url: videoData.videoUrl,
            autoPlay: true
          }}
          onCompletion={() => {
            this.setState({
              playOneShow: true,
              playTwoShow: false
            })
          }}
        /> }
        <View style={[styles.videoContainer, {backgroundColor: 'rgba(0,0,0,0.1)'}]} />
        <View style={styles.container}>
          <View style={styles.banner}>
            <JDScrollView
              ref="JDScrollView"
              horizontal={true}
              showsHorizontalScrollIndicator={false}
              showsVerticalScrollIndicator={false}
              scrollEventThrottle={200}>
              { bannerData.map((item, index) => (
                <JDTouchable key={index} onPress={() => {this.handlePress(item.data.clickUrl)}}>
                  <View>
                    <JDImage
                      style={styles.banner}
                      source={{ uri: item.imageUrl }}
                    />
                  </View>
                </JDTouchable>
              )) }
            </JDScrollView>
          </View>
          <View style={styles.imageContainer}>
            <JDTouchable onPress={() => {this.handlePress(image1Data.data.clickUrl)}}>
              <JDImage
                style={styles.image}
                source={{ uri: image1Data.imageUrl }} />
            </JDTouchable>
            <JDTouchable onPress={() => {this.handlePress(image2Data.data.clickUrl)}}>
              <JDImage
                style={styles.image}
                source={{ uri: image2Data.imageUrl }} />
            </JDTouchable>
            <JDTouchable onPress={() => {this.handlePress(image3Data.data.clickUrl)}}>
              <JDImage
                style={styles.image}
                source={{ uri: image3Data.imageUrl }} />
            </JDTouchable>
          </View>
        </View>
      </View>
    );
  }
}

const BANNER_WIDTH = JDDevice.getRpx(235);

const styles = StyleSheet.create({
  videoContainer: {
    height: JDDevice.getRpx(400),
    width: width
  },
  container: {
    paddingLeft: JDDevice.getRpx(75),
    paddingRight: JDDevice.getRpx(40),
    flexDirection: 'row',
    marginTop: -JDDevice.getRpx(150)
  },
  banner: {
    width: BANNER_WIDTH,
    height: JDDevice.getRpx(300)
  },
  imageContainer: {
    flexDirection: 'row',
    alignItems: 'flex-end',
    justifyContent: 'space-between',
    flex: 1,
    marginLeft: JDDevice.getRpx(50)
  },
  image: {
    width: JDDevice.getRpx(90),
    height: JDDevice.getRpx(133)
  }
});
